<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
	"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<title>BBKB Project</title>
	<style type="text/css" title="currentStyle">
		@import "css/smoothness/jquery-ui-1.8.16.custom.css";
		@import "css/bbkb.css";
		@import "css/team_table.css";
	</style>
	<script src="lib/jquery-1.6.2.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="lib/jquery.tmpl.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="lib/jquery.dataTables.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="lib/jquery-ui-1.8.16.custom.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/metadata.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/NationalLeague.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/AmericanLeague.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/playersAll.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/UI.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/NLP.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/BBKB.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
	<div id="header">
		<image id="logo" src="images/baseball.jpg"></image>
		<h1 id="title">MLB Baseball 2011 Knowledge Base</h1>
		<div id="team_member_div">Team Members: Ed, James, Jason, Will</div>
	</div>
	
	<div id="content">
	
		<div id="simple-query-tab" class="query-tab">
			<form>
				<div id="simplequery">
					<div>
						<fieldset>
							<legend>Simple Query Construction</legend>
							<div id="simpleSelectQueryDiv">
								Show teams where
								<select id="simpleQueryAttribute"></select>
								<select id="simpleQueryOperation"></select>
								<input id="simpleQueryValue" />
								<input id="doSimpleQuery" type="submit" value="Query" />
								<input id="resetSimpleQuery" type="reset" />
							</div>
						</fieldset>
					</div>
				</div>
			</form>
		</div>
		
		<div id="aggregate-query-tab" class="query-tab">
			<form>
				<div>
					<fieldset>
						<legend>Frequency Query Construction</legend>
						<div id="aggregateQueryDiv">
							Show frequencies of
							<select id="aggregateQueryAttribute"></select>
							<input id="doAggregateQuery" type="submit" value="Query" />
						</div>
					</fieldset>
				</div>
			</form>
		</div>
		
		<div id="nlp-query-tab" class="query-tab">
			<form>
				<fieldset>
					<legend>English Queries</legend>
					<div class="css_right">
						<button id="toggleLog">Toggle NLP Log</button>
					</div>
					<div>
						<label for="nlp-query">Query</label>
						<input id="nlp-query" />
						<input id="doNLPQuery" type="submit" value="Query"/>
						<input id="resetNLP" type="reset"/>
					</div>
					<div id="autoidx-error"></div>
				</fieldset>
			</form>
		</div>
		
		<div id="log-container" class="ui-widget" class="generated_text">
			<div>Log:</div>
			<div id="log" class="ui-widget-content"></div>
		</div>

		<div id="nlpResults-container" class="ui-widget" class="generated_text">
			NLP Results: <button id="toggleResults">Toggle NLP Results</button>
			<div id="nlpResults" class="ui-widget-content"></div>
		</div>
		
		<div id="results-table">
			<table id="results" class="display">
				<thead>
					<tr>
						<th>Name</th>
						<th>Wins</th>
						<th>Losses</th>
						<th>Retired #s</th>
						<th>Nicknames</th>
						<th>Colors</th>
						<th>Owner</th>
						<th>City</th>
						<th>State</th>
						<th>Stadium</th>
						<th>Founded</th>
						<th>Joined</th>
						<th>Division</th>
						<th>League</th>
						<th>Conference</th>
						<th>Championships</th>
						<th>Manager</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td style="visibility:hidden"></td>
						<td style="visibility:hidden"></td>
						<td style="visibility:hidden"></td>
						<td style="visibility:hidden"></td>						
						<td style="visibility:hidden"></td>
						<td style="visibility:hidden"></td>
						<td style="visibility:hidden"></td>
						<td style="visibility:hidden"></td>
						<td style="visibility:hidden"></td>
						<td style="visibility:hidden"></td>
						<td style="visibility:hidden"></td>
						<td style="visibility:hidden"></td>
						<td style="visibility:hidden"></td>
						<td style="visibility:hidden"></td>
						<td style="visibility:hidden"></td>
						<td style="visibility:hidden"></td>
						<td style="visibility:hidden"></td>
					</tr>
				</tbody>
			</table>

			<script id="result_nameTemplate" type="text/x-jquery-tmpl">${name}</script>
			<script id="result_winsTemplate" type="text/x-jquery-tmpl">${wins}</script>
			<script id="result_lossesTemplate" type="text/x-jquery-tmpl">${losses}</script>
			<script id="result_retiredNumbersTemplate" type="text/x-jquery-tmpl">${retired.join(", ")}</script>
			<script id="result_nicknameTemplate" type="text/x-jquery-tmpl">${nickname.join(", ")}</script>
			<script id="result_colorTemplate" type="text/x-jquery-tmpl">${colors.join(", ")}</script>
			<script id="result_ownerTemplate" type="text/x-jquery-tmpl">${owner.join(", ")}</script>
			<script id="result_cityTemplate" type="text/x-jquery-tmpl">${city}</script>
			<script id="result_stateTemplate" type="text/x-jquery-tmpl">${state}</script>
			<script id="result_stadiumTemplate" type="text/x-jquery-tmpl">${stadium}</script>
			<script id="result_foundedTemplate" type="text/x-jquery-tmpl">${founded}</script>
			<script id="result_joinedTemplate" type="text/x-jquery-tmpl">${joined}</script>
			<script id="result_divisionTemplate" type="text/x-jquery-tmpl">${division}</script>
			<script id="result_leagueTemplate" type="text/x-jquery-tmpl">${league}</script>
			<script id="result_conferenceTemplate" type="text/x-jquery-tmpl">${conference}</script>
			<script id="result_championshipTemplate" type="text/x-jquery-tmpl">${championships.join(", ")}</script>
			<script id="result_managerTemplate" type="text/x-jquery-tmpl">${manager}</script>
		</div>

		<div id="frequency-results">
			<table>
				<thead>
					<tr><th>Value</th><th>Frequency</th></tr>
				</thead>
				<tbody id="frequency-table"></tbody>
			</table>
			<script id="frequencyTemplate" type="text/x-jquery-tmpl"> 
			    <tr>
					<td>${key}</td><td>${value}</td>
				</tr>
			</script>
			
		</div>
	</div>
		
	<script type="text/javascript" charset="utf-8">	
		//Document.Ready
		$(function() {
			/** Initialize **/
			BBKB.init();
			UI.init({'showlog':false, 'showresults':false});
			NLP.init( {
				'autoidx':'#nlp-query', 
				'autoidx_error':'#autoidx-error'
			});
			BBKB.show_all_teams();
		});
	</script>
</body>
</html>
